@use 'colors';
@use 'z-index';

.GeoGebraFrame{
	$toolbarWidth: 600px;
	$toolbarHeight: 56px;
	$toolbarPanelHeight: 212px;

	$mowsubmenu-transition: bottom 0.2s cubic-bezier(0.4, 0, 1, 1);

	.showMowSubmenu {
		transition: $mowsubmenu-transition;
	}

	.hideMowSubmenu {
		transition: $mowsubmenu-transition;
	}

	.showMowSubmenu.narrowscreen {
		bottom: $toolbarPanelHeight !important;
	}

	.hideMowSubmenu.narrowscreen {
		bottom: $toolbarHeight !important;
	}

	.toolbarMow {
		will-change: transform;
		bottom: 212px;
		position: relative;
		max-width: $toolbarWidth;
		z-index: z-index.$z-mow-toolbar;
		margin: 0px auto;
		box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.20);

		.headerMow {
			background-color: colors.$mow_primary;

			.content {
				height: $toolbarHeight;

				.button {
					position: relative;
					&:hover img{
						opacity: 1;
					}
				}
				.center {
					position: absolute;
					top: 0px;
					margin: 4px auto;
					display: inline-flex;
					left: calc(50% - 108px);

					.indicator {
						width: 36px;
						height: 3px;
						background-color: white;
						vertical-align: bottom;
						position: relative;
						bottom: 10px;
						display: inline-table !important;
						top: 40px;
						transition: all 0.3s ease;
						left: 50%;
						opacity: 0.85;
					}
				}

				.center.indicatorLeft {
					.indicator {
						transform: translateX(50%) translateX(-66px);
					}
				}
				.center.indicatorCenter {
					.indicator {
						transform: translateX(50%) translateX(-18px);
					}
				}
				.center.indicatorRight {
					.indicator {
						transform: translateX(50%) translateX(30px);
					}
				}

				.openCloseBtn {
					float: right;
					margin: 10px 6px;
				}
			}
		}

		.toolbarMowPanel {
			overflow: hidden;

			.keyboardFocus:focus {
				outline: colors.$focus-black 5px auto;
			}

			.mowSubmenuScrollPanel {
				background-color: white;
				height: 156px;
				width: 300%;
				z-index: z-index.$z-mow-toolbar-panel;
				position: relative;
				display: flex;
				top: 0;

				&.slideLeft {
					left: 0 !important;
					transition: left 0.3s ease;
				}
				&.slideCenter {
					left: -100% !important;
					transition: left 0.3s ease;
				}
				&.slideRight {
					left: -200% !important;
					transition: left 0.3s ease;
				}

				.mowSubMenuContent {
					min-width: 582px;
					height: 100%;
					background-color: colors.$white;
				}

				.mowSubMenu {
					width: calc(100% / 3);
					overflow-x: auto;
					overflow-y: hidden;
					scrollbar-width: thin;

					.groupPanel {
						height: 144px;
						display: block;
						margin: 8px auto 4px auto;
						padding: 0px;

						.toolButton {
							display: inline-block;
							vertical-align: bottom;
							margin: 0px 10px;
						}
					}
				}

				.penSubMenu {
					.mowSubMenuContent {
						display: inline-flex;
						margin: 6px 10px 3px 43px;
						min-width: 547px;

						.groupPanel {
							margin: 0;
							width: 276px !important;
						}

						.toolButton {
							margin: 0 5px;
						}
					}

					.colorPanel {
						height: 90px;
						width: 220px;
						padding: 6px 0px 0px 20px;

						.mowColorButton {
							 width: 32px;
							 height: 32px;
							 border-radius: 2px;
							 margin: 6px;
							 cursor: pointer;
							 display: inline-block;

							&:hover:not(.disabled) {
								opacity: 0.65;
							}

							&.mowColorButton-selected {
								width: 38px;
								height: 38px;
								margin: 3px !important;
								border-radius: 2px;
							}
							&.disabled, .disabled:hover {
								opacity: 0.3;
								img {
									opacity: 0.3;
								}
								cursor: default;
							}
						}

						.mowColorPlusButton {
							@extend .mowColorButton;
							 width: 30px;
							 height: 30px;
							 border: 1px solid colors.$tool-border !important;
							 position: relative;
							 top: -7px;

							 img {
								opacity: 0.54;
							 }

							 &:hover:not(.disabled) {
								img {
									opacity: 1;
								}
								border: 1px solid colors.$mow_primary !important;
							 }
						}
					}

					.sizePanel {
						position: relative;
						left: initial;
						top: 5px;

						.mowOptionsSlider {
							.preview {
								position: absolute;
								top: 0;
								left: 172px;
								margin-right: 0px;
							}

							.gwt-Label {
								display: none;
							}

							&[disabled = true]{
								opacity: 0.3;
								input[type=range]::-webkit-slider-thumb:hover {
									cursor: default !important;
								}
							}
						}
					}
				}
			}
		}
	}

	.showMowToolbarPanel {
		bottom: $toolbarPanelHeight;
		transition: $mowsubmenu-transition;
	}
	.hideMowToolbarPanel {
		bottom: $toolbarHeight;
		transition: $mowsubmenu-transition;
	}

	.toolButton {
		display: inline-block;
		margin: 0px;
		border-radius: 4px;
		height: 72px;
		cursor: pointer;

		img {
			padding: 4px 28px;
			opacity: 0.54;
		}

		&.keyboardFocus:focus {
			outline: colors.$focus-black 5px auto;
		}

		.gwt-Label {
			color: colors.$text-secondary;
			font-size: 12px;
			width: 80px;
			height: 28px;
			text-align: center;
			line-height: 14px;
			position: relative;
			overflow: hidden;
		}

		&:hover {
			img {
				opacity: 1;
			}
			.gwt-Label {
				color: colors.$text-primary;
			}
		}
	}

	.toolButton[selected=true]{
		img {
			opacity: 1;
		}
		.gwt-Label {
			color: colors.$mow_primary;
		}
	}
}